var TableColShowSelect = function () {
  var TableColSelectForm = function () {
    var template = /* html */ `
      <div class="table-col-select-form">
        <template v-for="tableColumn in tableColumns">
          <div v-if="currentColumnName===undefined||currentColumnName===tableColumn.tableName" :key="'table_'+tableColumn.tableName" class="table-col-item">
            <div v-if="getTableName(tableColumn)!==null" class="table-col-title">
              {{getTableName(tableColumn)}}表显示列设置
            </div>
            <el-checkbox :checked="getCheckAll(tableColumn.cols)" :indeterminate="getHalfCheck(tableColumn.cols)" 
              @change="function(checked){allCheckChange(tableColumn.cols,checked)}">全选</el-checkbox>
            <div class="select-form-content">
              <template v-for="col in tableColumn.cols">
                <div :key="'select-item'+col.id" :style="{width:'calc('+tableColumn.itemWidth+'em + 25px)'}">
                  <el-checkbox class="col-checkbox-item" v-model="col.checked" :disabled="col.disabled">
                    {{col.label}}
                  </el-checkbox>
                </div>
              </template>
            </div>
          </div>
        </template>
        <div style="text-align:center;margin-top:20px;">
          <el-button type="primary" size="medium" @click="ensure">确定</el-button>
          <el-button type="danger" size="medium" @click="cancel">取消</el-button>
        </div>
      </div>
    `;

    return {
      props: {
        column: {
          type: Object,
          required: true
        },
        currentColumnName: String
      },

      data: function () {
        return {
          tableColumns: this.getTableColumns()
        };
      },

      methods: {
        getTableColumns: function () {
          var column = this.column;
          var tableColumns = [];
          for (var tableName in column) {
            var cols = column[tableName];
            cols = _.cloneDeep(cols);
            var itemWidth = this.getItemWidth(cols);
            tableColumns.push({
              tableName: tableName,
              itemWidth: itemWidth,
              cols: cols
            });
          }
          return tableColumns;
        },

        getItemWidth: function (columns) {
          var column = _.maxBy(columns, function (column) {
            return column.label.length;
          });
          var maxWidth = 0;
          if (column !== undefined) {
            maxWidth = column.label.length;
          }
          return maxWidth;
        },

        allCheckChange: function (columns, checked) {
          for (var i = 0; i < columns.length; i++) {
            var column = columns[i];
            if (column.disabled) {
              continue;
            }
            column.checked = checked;
          }
        },

        getCheckAll: function (columns) {
          var column = _.find(columns, function (column) {
            if (column.disabled) {
              return false;
            }
            return !column.checked;
          });
          return column === undefined;
        },

        getHalfCheck: function (columns) {
          columns = _.filter(columns, function (column) {
            return !column.disabled;
          });
          var count = _.sumBy(columns, function (column) {
            if (column.checked) {
              return 1;
            }
            return 0;
          });
          return count > 0 && count < columns.length;
        },

        getTableName: function (column) {
          return tableColConfigUtil.getTableName(column.tableName);
        },

        ensure: function () {
          var tableColumns = this.tableColumns;
          var columnKey = {};
          for (var i = 0; i < tableColumns.length; i++) {
            var tableColumn = tableColumns[i];
            var cols = tableColumn.cols;
            var checkCols = _.filter(cols, {
              checked: false
            });

            if (checkCols.length === cols.length) {
              this.$alert('请选择表格需要显示的列', '信息');
              return;
            }
            var columnKeys = _.map(checkCols, 'id');
            columnKey[tableColumn.tableName] = columnKeys;
          }
          this.$emit('ensure', columnKey);
        },

        cancel: function () {
          this.$emit('cancel');
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="table-col-show-select" v-loading.fullscreen.lock="loading">
      <el-button class="setting-btn" size="medium" type="primary" title="设置表格显示列" @click="openColSelect=true">列设置</el-button>

      <el-dialog title="选择表格显示列" :visible.sync="openColSelect" top="10vh" width="60%" custom-class="tableColShowDialog">
        <div style="height:calc(80vh - 54px);overflow:auto;">
          <table-col-select-form v-if="openColSelect" :column="column" :current-column-name="currentColumnName" @cancel="closeDialog" @ensure="updateColStatus">
          </table-col-select-form>
        </div>
      </el-dialog>
    </div>
  `;

  return {
    props: {
      tableName: {
        type: String,
        required: true
      },
      hideColumn: {
        type: Object,
        required: true
      },
      currentColumnName: String,
      remoteSave: {
        type: Boolean,
        default: true
      }
    },

    watch: {
      tableShowConfig: function (newConfig, oldConfig) {
        if (newConfig.tableName !== oldConfig.tableName) {
          this.column = this.getColumn();
        }
        this.initChecked();
      }
    },

    computed: {
      tableShowConfig: function () {
        var tableName = this.tableName;
        var hideColumn = this.hideColumn;
        return {
          tableName: tableName,
          hideColumn: hideColumn
        };
      }
    },

    data: function () {
      return {
        loading: false,
        column: this.getColumn(),
        openColSelect: false
      };
    },

    created: function () {
      this.initChecked();
    },

    methods: {
      getColumn: function () {
        var tableName = this.tableName;
        var column = tableColConfigUtil.getConfig(tableName);
        if (column === null) {
          return null;
        }
        return column;
      },

      initChecked: function () {
        var column = this.column,
          hideColumn = this.hideColumn;
        for (var tableName in column) {
          var cols = column[tableName];
          var hideCols = hideColumn[tableName];
          if (hideCols === undefined) {
            hideCols = [];
          }
          for (var j = 0; j < cols.length; j++) {
            var col = cols[j];
            if (col.disabled) {
              col.checked = true;
              continue;
            }
            col.checked = hideCols.indexOf(col.id) === -1;
          }
        }
      },

      updateColStatus: function (columnKey) {
        for (var key in columnKey) {
          if (columnKey[key].length === 0) {
            delete columnKey[key];
          }
        }

        this.loading = true;
        var self = this;
        this.toUpdateColStatus({
          tableName: this.tableName,
          columnKey: columnKey
        }).then(function (msg) {
          self.loading = false;
          self.$alert(msg, '信息', {
            callback: function () {
              self.openColSelect = false;
              self.$emit('update:hideColumn', columnKey);
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      toUpdateColStatus: function (postData) {
        if (!this.remoteSave) {
          var tableColConfig = localStorage.getItem('tableColConfig');
          if (SysUtil.isEmpty(tableColConfig)) {
            tableColConfig = {};
          } else {
            tableColConfig = JSON.parse(tableColConfig);
          }

          tableColConfig[postData.tableName] = postData.columnKey;
          localStorage.setItem('tableColConfig', JSON.stringify(tableColConfig));
          return Promise.resolve("保存表格显示列配置成功");
        }

        return ajaxRequest('tableCoucmnlConfig/saveConfig', {
          tableName: postData.tableName,
          hideColumn: JSON.stringify(postData.columnKey)
        }).then(function (msg) {
          return msg;
        });
      },

      closeDialog: function () {
        this.openColSelect = false;
      }
    },
    components: {
      TableColSelectForm: TableColSelectForm
    },

    template: template
  };
}();

importFiles([
  "/vueSystem/mixins/tableColShowMixin.js"
]);
